<template>
    <div>
        <h1>Video 视频</h1>
        <div>
            <h2>H5 视频组件</h2>
            <p>功能包含了暂停，播放，快进，快退，倍速，音量调节，画中画，全屏，最大屏，进度条拖拽等视频播放器的所有功能。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-video id="video1" res="http://www.w3school.com.cn/i/movie.mp4"></mo-video>
                    </div>
                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="html">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>H5 视频组件</h2>
            <p>功能包含了暂停，播放，快进，快退，倍速，音量调节，画中画，全屏，最大屏，进度条拖拽等视频播放器的所有功能。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-video id="video2" :res="require('@/assets/video_01.mp4')"></mo-video>
                    </div>
                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="html">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue';
export default {
    name: 'icon',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        let data = reactive({
            button1:false,
            button2:false
        });
        
        
        return {
            ...toRefs(data)
        };
    }
};

</script>
<style lang='scss' scoped>

</style>
